Build CRUD Application with ZK Studio in 6 Steps
Peter Kuo, Engineer, Potix Corporation
Jan 21, 2009
ready
Latest Update
The final version is at ZK Studio Essentials: DB Form Builder.
Introduction
It's common for web application to work with database. A data provider serves as a bridge between an application and a data source. It is used to retrieve data from a data source, and if the data is changed by UI, data provider will sync the change back to the data source.
ZK aims to make things easier. Let ZK do the redundant routine needed for database. More than data provider, ZK tries to provide a wizard that can generate whole skeleton web application following MVC pattern, working with Spring and JPA.
At the very first stage, the wizard can help developer to generate management web page that is able to perform CRUD(Create, Read, Update, Delete)[1] operation on tables in database easily.
In this smalltalk, we will demo its usage step by step. (This feature is under development, this smalltalk is for demo only.)
Demo: Running the generated Web Application
In the demo, we add three records into the table. We edited detail of each record, and the added record is shown in the view.
- In the left part, it shows records in list form. Column fields are set in Step 3: Edit Columns in Table List.
- In the right part, it shows detail of each record. Detail fields are set in Step 4: Edit Columns in Detail Maintenance.
Step By Step : Create Todo List CRUD Page From Database
In following paragraph, we'll demo how to create a TODO_LIST CRUD page from database through this wizard in 6 steps. Once you have the database , you simply have to fill in fields of forms, and the rest is done by ZK Studio.
Step 1: Choose Database
In this step, you can specify which Database and through what JDBC driver to connect. Of course, you have to input your username and password to connect to the database.
Step 2: Choose Table and Columns
After connected to database, we can see tables inside it. In Available Table List frame we choose Table: Todo . In Data Preview frame, it shows data that already exist in this table. In Table Columns frame, there are three things to notify. In column Java Type, it's a concept of ORM(Object Relational Mapping)[2]. It translates each column in database to its mapping POJO(Plain Old Java Object)[3]. Therefore we can manipulate records in database as objects in java. Second, Items that get checked in List column will form the view of final generated CRUD page. It's the left part of the demo. And third, items that get checked in Detail column will form the detail maintenance Input. It's the right part of the demo.
Step 3: Edit Columns in Table List
In above picture, four columns NAME, PRIORITY, DATE, DEADLINE checked in Step 2: Choose Table and Columns will be shown in final generated web page. Each of them present a column of the table. We can configure how each column is formatted and shown in the view. Take the DATE column as a example, its column caption will be Opened, and its content will be formatted as MM/dd/yyyy, and you can sort data of the table by this column.
Step 4: Edit Columns in Detail Maintenance
In detail maintenance, we can modify the detail of each record of the table. For each column in Detail, we can configure how this field appear in detail maintenance. Take DATE column for example, we will use zul element Datebox as its editor, and we also constrain its value not to be empty.
Step 5: Select UI Template
UI template is used to generate zul page for UI. It will decide how to layout the generated elements, and the look and feel of final web page. Most important of all, it's used to confine behavior of final application, such as read only property. While you choose different template in Available UI Template in the left part, you can see the preview of the result UI in the right part in real time.
Step 6: Java and Page Information
In this step, you have to specify package and source folder of generated java code and zul page. Other page information will be passed to UI template, and the final project is generated accordingly.
The Result
Following the six steps with wizard, a skeleton ZK project is generated.
Generated Project Structure
As you can see in above picture, all file in the project zkspringjpa_todo is generated by the wizard. It's much like a human coded ZK application. You can modify it afterward as you like. In additional, the generated project follows MVC pattern. And it works together with framework JPA and spring. You can see use of annotation in above picture.
Summary
Through this new feature of ZK studio, one can generate a Database related CRUD page easily. Simply follow the wizard's instruction and fill in predefined forms. Then a well structured ZK project is generated. No more hard coding for daily routine jobs.
This wizard is at the very beginning stage. Its vision is to support other advance features such as Query Condition Builder, and generate multi page web application without human coding.
Any new feature request is welcome to propose.
Download
So far, We provide .war file of the generated TODO List management application to serve demo purpose. You can download the demo file in SourceForge.
How to Run the Demo
- Deploy zk_spring_jpa_todo.war to your application server.
- You should be able to see the application in http://localhost:8080/zk_spring_jpa_todo/todo.zul
Trouble shooting when Running under JDK 5
Because we use some annotation that's only available in JDK 6 and above. If you want to run the demo under JDK 5, you have to copy jsr250-api.jar to directory zk_spring_jpa_todo\WEB-INF\lib manually.
For license issue, we can't provide the jsr250-api.jar in this .war file. Please visit JSR-250 download page in JCP and download com_annotations-1_0-fr-api-doc.zip. It has jsr250-api.jar inside it.
Reference
- ↑ Create, Read, Update, Delete are the four basic functions of persistent storage.CRUD in wikipedia
- ↑ Object Relational Mapping ORM in wikipedia
- ↑ Plain Old Java Object POJO in wikipedia
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |